<script setup lang="ts">
import { ref } from 'vue'
import Modal from './Modal.vue'
const emits = defineEmits(['toggle-sidebar'])
const toggleSidebar = () => {
  emits('toggle-sidebar')
}

const showModal = ref(false)
const handleConfirm = (msg: string) => {
  console.log('用户点击了确认按钮')
  console.log(msg)
  showModal.value = false
}
</script>

<template>
  <div class="main-content">
    <button @click="toggleSidebar">切换侧边栏</button>
    <div class="content">这里是主要内容区域，宽度会自适应</div>
    <button @click="showModal = true">打开弹窗</button>
    <Modal
      :visible="showModal"
      title="示例弹窗"
      cancelText="取消"
      confirmText="确定"
      @close="showModal = false"
      @confirm="handleConfirm"
    >
      这是弹窗内容
    </Modal>
  </div>
</template>

<style scoped>
.main-content {
  flex: 1;
  padding: 20px;
  overflow: auto;
}
button {
  padding: 8px 16px;
  margin-bottom: 20px;
  cursor: pointer;
}
.content {
  background-color: #f0f2f5;
  padding: 20px;
  border-radius: 4px;
  min-height: calc(100vh-100px);
}
</style>
